.root-container {
  height: 100%;
  position: relative;
  background: radial-gradient(22.92% 54.78% at 14.84% 65.09%, rgba(0, 101, 250, 0.6) 0, rgba(0, 98, 250, 0) 100%), radial-gradient(61.67% 48.45% at 74.64% 30.87%, rgba(0, 101, 250, 0.8) 0, rgba(0, 98, 250, 0) 100%), #131838;
}
.company-center {
  background-color: #0550c5;
  width: 180px;
  height: 180px;
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #ffffff;
  box-sizing: border-box;
  text-align: center;
}
.region {
  width: 60px;
  height: 60px;
  background-image: radial-gradient(#ffffff, #436cf1);
  color: #436cf1;
  border-radius: 50%;
  font-size: 14px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 40%;
  box-sizing: border-box;
  text-align: center;
  transition: all 100ms linear;
}
.region:hover {
  background-image: radial-gradient(#436cf1, #ffffff);
  color: #ffffff;
}
.region.center {
  transform: translate(540px, -220px);
}
.region.north {
  transform: translate(-50%, -170px);
}
.region.south {
  transform: translate(-50%, 110px);
}
.region.west {
  transform: translate(-230px, -50%);
}
.region.east {
  transform: translate(150px, -50%);
}
.region.west-north {
  transform: translate(-170px, -170px);
}
.region.west-north::after {
  content: "";
  display: block;
}
.region.east-north {
  transform: translate(110px, -170px);
}
.region.west-south {
  transform: translate(-170px, 110px);
}
.region.east-south {
  transform: translate(110px, 110px);
}
.company-list-bubble {
  position: absolute;
  top: 50%;
  left: 40%;
  z-index: 0;
}
.company-list-bubble .bubble-center {
  transform: translate(640px, -220px);
}
.company-list-bubble .bubble-center .bubble-content {
  transform: translate(0, -100%);
  padding: 0;
  box-sizing: border-box;
  max-height: 190px;
  max-width: 360px;
  overflow-y: auto;
  overflow-x: visible;
  box-shadow: 0 0 2px rgba(164, 222, 238, 0.4);
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 14px;
  background-color: #29408f;
}
.company-list-bubble .bubble-north {
  transform: translate(-50%, -210px);
}
.company-list-bubble .bubble-north .bubble-content {
  transform: translate(0, -100%);
  padding: 0;
  box-sizing: border-box;
  max-height: 190px;
  max-width: 360px;
  overflow-y: auto;
  overflow-x: visible;
  box-shadow: 0 0 2px rgba(164, 222, 238, 0.4);
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 14px;
  background-color: #29408f;
}
.company-list-bubble .bubble-south {
  transform: translate(-50%, 210px);
}
.company-list-bubble .bubble-south .bubble-content {
  padding: 0;
  box-sizing: border-box;
  max-height: 190px;
  max-width: 360px;
  overflow-y: auto;
  overflow-x: visible;
  box-shadow: 0 0 2px rgba(164, 222, 238, 0.4);
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 14px;
  background-color: #29408f;
}
.company-list-bubble .bubble-west {
  transform: translate(-330px, -50%);
}
.company-list-bubble .bubble-west .bubble-content {
  transform: translate(-100%, 0);
  padding: 0;
  box-sizing: border-box;
  max-height: 190px;
  max-width: 360px;
  overflow-y: auto;
  overflow-x: visible;
  box-shadow: 0 0 2px rgba(164, 222, 238, 0.4);
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 14px;
  background-color: #29408f;
}
.company-list-bubble .bubble-east {
  transform: translate(290px, -50%);
}
.company-list-bubble .bubble-east .bubble-content {
  padding: 0;
  box-sizing: border-box;
  max-height: 190px;
  max-width: 360px;
  overflow-y: auto;
  overflow-x: visible;
  box-shadow: 0 0 2px rgba(164, 222, 238, 0.4);
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 14px;
  background-color: #29408f;
}
.company-list-bubble .bubble-west-north {
  transform: translate(-210px, -210px);
}
.company-list-bubble .bubble-west-north .bubble-content {
  transform: translate(-120%, -30%);
  padding: 0;
  box-sizing: border-box;
  max-height: 190px;
  max-width: 360px;
  overflow-y: auto;
  overflow-x: visible;
  box-shadow: 0 0 2px rgba(164, 222, 238, 0.4);
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 14px;
  background-color: #29408f;
}
.company-list-bubble .bubble-east-north {
  transform: translate(210px, -210px);
}
.company-list-bubble .bubble-east-north .bubble-content {
  transform: translate(20%, -30%);
  padding: 0;
  box-sizing: border-box;
  max-height: 190px;
  max-width: 360px;
  overflow-y: auto;
  overflow-x: visible;
  box-shadow: 0 0 2px rgba(164, 222, 238, 0.4);
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 14px;
  background-color: #29408f;
}
.company-list-bubble .bubble-west-south {
  transform: translate(-210px, 210px);
}
.company-list-bubble .bubble-west-south .bubble-content {
  transform: translate(-120%, -30%);
  padding: 0;
  box-sizing: border-box;
  max-height: 190px;
  max-width: 360px;
  overflow-y: auto;
  overflow-x: visible;
  box-shadow: 0 0 2px rgba(164, 222, 238, 0.4);
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 14px;
  background-color: #29408f;
}
.company-list-bubble .bubble-east-south {
  transform: translate(210px, 210px);
}
.company-list-bubble .bubble-east-south .bubble-content {
  transform: translate(20%, -30%);
  padding: 0;
  box-sizing: border-box;
  max-height: 190px;
  max-width: 360px;
  overflow-y: auto;
  overflow-x: visible;
  box-shadow: 0 0 2px rgba(164, 222, 238, 0.4);
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 14px;
  background-color: #29408f;
}
.company-list-bubble .company-item {
  padding: 4px 8px 4px 16px;
  cursor: pointer;
  position: relative;
  color: #ffffff;
  transition: all 100ms linear;
}
.company-list-bubble .company-item.has-children::before {
  content: "";
  display: block;
  position: absolute;
  left: 6px;
  top: 10px;
  width: 6px;
  height: 6px;
  background-color: #26e7f1;
  border-radius: 50%;
  margin-right: 10px;
}
.company-list-bubble .company-item:hover {
  color: #29408f;
  background-color: #ffffff;
}
.company-list-bubble .company-item + .company-item {
  border-top: 1px solid #0d3278;
}
.detail-info {
  position: fixed;
  opacity: 1;
  background-color: #303957;
  box-shadow: 0 0 6px rgba(164, 222, 238, 0.4);
  padding: 10px;
  z-index: 99;
  display: none;
  transform: translateY(-50%);
}
.detail-info .detail-item {
  display: flex;
  align-items: center;
  padding: 4px;
}
.detail-info .detail-item + .detail-item {
  border-top: 1px solid #b1c2f9;
}
.detail-info .detail-label {
  display: block;
  width: 90px;
  font-size: 14px;
  color: #f4f4f4;
  text-align: right;
}
.detail-info .detail-value {
  font-size: 14px;
  color: #ffffff;
}
